<template>
	<view class="container">
		<view class="celebrity-box" v-for="(item,index) in mrlist" @click="more(item)">
			<image :src="item.headUrl" mode="aspectFill"></image>
			<view class="detail">
				<view class="name">{{item.celebrityName}}</view>
				<view class="introduce">{{item.synopsis}}</view>
				<view class="more" >查看更多</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getmszs}from"../../../api/index.js"
	export default{
		data(){
			return{
				num:1,
				mrlist:[]
			}
		},
		onLoad() {
			this.getmrzs()
		},
		onReachBottom() {
			this.getmrzs()
		},
		methods:{
			more(item){
				uni.navigateTo({
					url:'./celebrityDetail?data='+JSON.stringify(item)
				})
			},
			// 获取悯人展示
			async getmrzs(){
				let res=await this.get(getmszs,{pageNum:this.num,pageSize:10})
				this.num++
				this.mrlist=[...this.mrlist,...res.data]
			},
		}
	}
</script>

<style lang="less">
	.container{
		padding: 0 30rpx 50rpx;
	}
	.celebrity-box{
		width: 690rpx;
		height: 380rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 20rpx rgba(0, 0, 0, 0.16);
		border-radius: 12rpx;
		display: flex;
		// align-items: center;
		margin: 30rpx 0;
		padding: 20rpx;
		image{
			width: 260rpx;
			height: 340rpx;
		}
	}
	.detail{
		width: 370rpx;
		margin-left: 20rpx;
	}
	.name{
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 20rpx;
	}
	.introduce{
		overflow: hidden;  
		text-overflow: ellipsis;  
		display: -webkit-box;  
		-webkit-line-clamp: 7;  
		-webkit-box-orient: vertical; 
		text-indent: 2em;
		font-size: 26rpx;
		color: #666666;
	}
	.more{
		font-size: 26rpx;
		color: #F09238;
		margin-top: 10rpx;
	}
</style>
